<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name=viewport content="width=1220">
    <meta name="format-detection" content="telphone=no, email=no" />
    <title set-lang="text:invite_register"></title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div id="app">
        <template>
            <header>
                <div class="header">
                    <div class="header-left">布比区块链浏览器</div>
                    <div class="header-middle">
                        <div class="header-search">
                            <input type="text" placeholder="区块高度、交易哈希、账户地址" class="search-input">
                            <div class="search-btn"></div>
                        </div>
                    </div>
                    <div class="header-right">
                        <div class="nav">
                            <a href="index.html">首页</a>
                            <a href="transaction.html">交易列表</a>
                            <a href="assets.html">资产</a>
                        </div>
                    </div>
                </div>
            </header>
            <section class="container">
                <div class="container-box">
                    <div class="main-box">
                        <div class="main-box-header bd-bottom">
                            <div class="title">账户 ：adxSkAotRdH3mhKyLpkk6BDumuUdmfc5tdXet</div>
                        </div>
                        <div class="assets-detail-cont">
                            <div class="assets-table">
                                <div class="assets-item">
                                    <div>Gas数量</div>
                                    <div><span>7,781.6909</span></div>
                                </div>
                                <div class="assets-item">
                                    <div>nonce</div>
                                    <div><span>23</span></div>
                                </div>
                                <div class="assets-item">
                                    <div>账户类型</div>
                                    <div><span>普通账户</span></div>
                                </div>
                            </div>
                        </div>
                        <div class="row-data">
                            <div class="row-btn"><a :class="{'active':isShowRow}" @click="showRow">原始数据</a></div>
                            <div class="row-json" v-show="isShowRow">
                                <pre>
                                    <code>
                                        {
                                            "error_code": 0,
                                            "result": {
                                              "header": {
                                                "account_tree_hash": "a25e4d40d01c505ec3637be8511ec67e90000bae06dab4aeab61cbd751bd1867",
                                                "close_time": 1587434970714671,
                                                "consensus_value_hash": "8bf6b15f6619df493514900aa99318c1053152bfb34aa39ed111dd4b42e93149",
                                                "fees_hash": "916daa78d264b3e2d9cff8aac84c943a834f49a62b7354d4fa228dab65515313",
                                                "hash": "d4e2e8fca9951543cf5a0f852d2f168ea79f5786920533c710c86c1174e383ff",
                                                "previous_hash": "fc50ab16ce7c99b88f144c7e10a8bfa29ae2f05d0b20266d39df77921d9a4b70",
                                                "seq": 162088,
                                                "tx_count": 73713,
                                                "validators_hash": "4816498fd2f9417c744dc557e56c92cc2973711f7d1455f137b8c10c330e2cde",
                                                "version": 4000
                                              },
                                              "ledger_length": 227
                                            }
                                          }
                                    </code>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <div class="assets-detail-table">
                        <div class="table-menu">
                            <a :class="{'active': type==1}" @click="chooseType(1)">资产列表</a>
                            <a :class="{'active': type==2}" @click="chooseType(2)">最近5笔交易</a>
                        </div>
                        <div class="table-cont">
                            <!--资产列表-->
                            <div class="faxingjilu" v-show="type == 1">
                                <div class="item">
                                    <div class="item-row">
                                        <div><span>资产ID</span></div>
                                        <div>HELLO</div>
                                    </div>
                                    <div class="item-row">
                                        <div><span>数量</span></div>
                                        <div>12</div>
                                    </div>
                                    <div class="item-row">
                                        <div><span>资方账户地址</span></div>
                                        <div>adxSjPX6GgqesoTTGRvf2mbht5EYgn5xegzGY</div>
                                    </div>
                                </div>
                            </div>
                            <!--最近5笔交易-->
                            <div v-show="type==2">
                                <div class="jiaoyi-more"><a>更多交易>></a></div>
                                <div class="jiaoyi">
                                    <div class="jiaoyi-item">
                                        <div>时间</div>
                                        <div>所在区块</div>
                                        <div>交易类型</div>
                                        <div>源用户</div>
                                        <div>目的账户</div>
                                        <div>数量</div>
                                        <div>交易哈希</div>
                                        <div>状态</div>
                                    </div>
                
                                    <div class="jiaoyi-item">
                                        <div>2020.04.20 16:36:18</div>
                                        <div><a>16232</a></div>
                                        <div><span>Gasn</span></div>
                                        <div><a>adxSkA***5tdXet</a></div>
                                        <div><a>adxSkA***5tdXet</a></div>
                                        <div>0.1GAS</div>
                                        <div><a>9190b298913faae33790</a></div>
                                        <div>成功</div>
                                    </div>
                                    <div class="jiaoyi-item">
                                        <div>2020.04.20 16:36:18</div>
                                        <div><a>16232</a></div>
                                        <div><span>Gasn</span></div>
                                        <div><a>adxSkA***5tdXet</a></div>
                                        <div><a>adxSkA***5tdXet</a></div>
                                        <div>0.1GAS</div>
                                        <div><a>9190b298913faae33790</a></div>
                                        <div>成功</div>
                                    </div>
                                    <div class="jiaoyi-item">
                                        <div>2020.04.20 16:36:18</div>
                                        <div><a>16232</a></div>
                                        <div><span>Gasn</span></div>
                                        <div><a>adxSkA***5tdXet</a></div>
                                        <div><a>adxSkA***5tdXet</a></div>
                                        <div>0.1GAS</div>
                                        <div><a>9190b298913faae33790</a></div>
                                        <div>成功</div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    
                </div>
            </section>
            <footer>
                <div class="footer">
                    Copyright © 2020 布比区块链
                </div>
            </footer>
        </template>
    </div>
    
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        $(function(){
            initEvent();
        });
        function initEvent(){
            var app = new Vue({
                el: '#app',
                data: {
                    type: 2,
                    isShowRow: false,
                },
                methods: {
                    showRow: function(){
                        this.isShowRow = !this.isShowRow;
                    },
                    chooseType: function(type){
                        this.type = type;
                    }
                }
            })
        }
    </script>
   
</body>
    
</html>